<template>
	<div class="tree">
		<li v-for="(item,index) in treeData">
			<span style="display: inline-block;width:20px;height:20px;margin-right:10px;">
				<span v-if="item.children.length>0">

					<img src="./image/arrowDown.png" v-if="item.isExpand" @click="handleExpand(item)" height="20"
						width="20" class="arrow" />
					<img src="./image/arrowRight.png" v-else height="16" @click="handleExpand(item)" width="16"
						class="arrow" />

				</span>
			</span>
			<img src="./image/select.png" @click="handSelect(item)" v-if="item.roleSelect" height="15" width="15"
				class="select" />
			<img src="./image/noSelect.png" @click="handSelect(item)" v-else height="18" width="18" class="select" />
			<span>{{item.name}}</span>
			<treeCom :treeData="item.children" v-if="item.isExpand" />
		</li>

	</div>
</template>
<script>
	export default {
		props: {
			treeData: {
				type: Array,
				default: function () {
					return []
				}
			}
		},
		data() {
			return {

			}
		},
		methods: {
			handleExpand(item) {
				console.log(item)
				item.expand()
			},
			handSelect(item) {
				item.checkStatus()
			}
		}
	}
</script>
<style scoped>
	.tree {
		margin-left: 15px;
	}

	li {
		padding: 5px 0;
		margin-left: 15px;
	}

	li img {
		cursor: pointer;
		vertical-align: middle;

	}

	li span {
		vertical-align: middle;
		font-size: 14px;
	}

	.arrow {
		margin-right: 5px;
	}

	.select {
		margin-right: 5px;
	}
</style>